<template>
    <div>
        <el-dropdown placement="bottom">
            <slot name="icon"></slot>
            <el-dropdown-menu slot="dropdown">
                <slot name="content"></slot>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    export default {
        name: "dropdown"
    }
</script>

<style scoped lang="scss">
@keyframes whzoom{
     from{
         transform: scale(0,0);
         transform-origin: 0 0 0;
     }
     to{
         transform: scale(1,1);
         transform-origin: 0 0 0;
     }
}
@keyframes whzoominv{
    from{
        transform: scale(0,0);
        transform-origin: 100% 0 0;
    }
    to{
        transform: scale(1,1);
        transform-origin: 100% 0 0;
    }
}
.el-dropdown-menu{
    background-color: rgb(45,45,48);
    border-color: rgb(45,45,48);
    transition: all .3s ease;
    animation:whzoom .3s forwards;
    /deep/ .popper__arrow::after{
        border-bottom-color: rgb(45,45,48) !important;
        top: -14px !important;
        margin-left: -10px !important;
        border-width: 10px !important;
    }
}
</style>